<!DOCTYPE html>
<html>
<head>
	<title>选号</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index2.css">
	<style type="text/css">[v-cloak]{display: none;}</style>
</head>
<body class="">
<div id="app" v-cloak class="detail">
	<!--<div class="search_div pad_usual">
		<div class="search_box">
			<input type="search" class="search_input">
			<span class="search_text pos_center">搜索 <img src="img/search.png" class="icon_search" alt=""></span>
		</div>
	</div>-->
<!--	<ul class="disFlex all_option">
		<li>
			<div @click="asideBtn">
				归属地 <img src="img/arr_up.png" class="icon_up" alt="">
			</div>

		</li>
		<li>
			<div>
				运营商 <img src="img/arr_up.png" class="icon_up" alt="">
			</div>
		</li>
		<li>
			<div>
				排序 <img src="img/arr_up.png" class="icon_up" alt="">
			</div>
		</li>
		<li>
			<div>
				筛选 <img src="img/arr_up.png" class="icon_up" alt="">
			</div>
		</li>
	</ul>-->
	<div class="line_bg"></div>
	<div class="number foot_margin pad_usual">
		<div class="number_box">
			<div :class="{number_item:true,move:i==3}" v-for="i in 5" @click="goDtl">
				<div class="number_span">
					<span>139</span> <span>1010</span> <span>2959</span>
				</div>
				<div class="region">
					<span>成都</span><span>移动</span>
				</div>
				<div class="info">
					<span class="red">￥ 100</span> （含话费49元）
				</div>
				<img src="img/appoint.png" v-if="i==3" class="icon_appoint" alt="">
			</div>
			<div class="number_item empty"></div>
		</div>
	</div>
<!--	<div class="layer drawer" :style="{right:right+'%'}" @click="asideBtn">
		<div class="aside">
			<div class="pad_usual option1"  @click.stop="">
				<div class="title">筛选</div>
				<ul class="condition" @click.stop="submenuOpen">
					<li>运营商 <span class="choose">全部 <img src="img/arr_right.png" class="icon_right" alt=""></span></li>
					<li>号段  <span  class="choose">全部 <img src="img/arr_right.png" class="icon_right" alt=""></span></li>
					<li>价格 <span  class="choose">全部 <img src="img/arr_right.png" class="icon_right" alt=""></span></li>
					<li>中间规律 <span  class="choose">全部 <img src="img/arr_right.png" class="icon_right" alt=""></span></li>
					<li>尾数规律 <span  class="choose">全部 <img src="img/arr_right.png" class="icon_right" alt=""></span></li>
					<li>数字属性 <span  class="choose">全部 <img src="img/arr_right.png" class="icon_right" alt=""></span></li>
					<li>生日号码 <span  class="choose">全部 <img src="img/arr_right.png" class="icon_right" alt=""></span></li>
					<li>吉祥号码 <span  class="choose">全部 <img src="img/arr_right.png" class="icon_right" alt=""></span></li>
				</ul>
				<div class="btn_box">
					<div class="btn">重置已选</div>
					<div class="btn on">确定</div>
				</div>
			</div>
		</div>
		<div class="aside submenu" :style="{right:subRight+'%'}">
			<div class="pad_usual option1">
				<div class="title">运营商</div>
				<ul class="condition">
					<li @click="submenuClose">全部</li>
					<li>移动</li>
					<li>联通</li>
					<li>电信</li>
				</ul>
			</div>
		</div>
	</div>-->
</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/public.js"></script>
<!--<script src="js/views/index-es5.js"></script>-->
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            headNav:[{item:'移动选号',on:1},
                {item:"电信选号",on:0},
                {item:"联通选号",on:0},
                {item:"虚拟运营商选号",on:0},
                {item:"座机选号",on:0}],
            headOn:0,
			right:0, //init -100
			rightClose:false,
			timeInter:0,

			subRight:-100,
			subRightInter:0
        },
        methods:{
            submenuClose:function () {
				var that = this;
				clearInterval(that.subRightInter);
				that.subRightInter=setInterval(function () {
					that.subRight = that.subRight - 5;
					if(that.subRight<-100){
					    that.subRight = -100;
					    clearInterval(that.subRightInter)
					}
                },10)
            },
            goDtl:function () {
				location.href="detail.html"
            },
            submenuOpen:function () {
                var that = this;
                clearInterval(that.subRightInter);
                that.subRightInter=setInterval(function () {
                    that.subRight = that.subRight + 5;
                    if(that.subRight>0){
                        that.subRight = 0;
                        clearInterval(that.subRightInter)
                    }
                },10)
            },
            asideBtn:function () {
                var that = this;
                clearInterval(that.timeInter)
                if(that.rightClose){
                    that.timeInter=setInterval(function () {
                        that.right = that.right -5;
                        if(that.right<-100){
                            that.right= -100;
                            clearInterval(that.timeInter);
                        }
                    },10)
				}else{
                    that.timeInter=setInterval(function () {
                        that.right = that.right + 5;
                        if(that.right>0){
                            that.right=0;
                            clearInterval(that.timeInter);
                        }
                    },10)
                }
                that.rightClose=!that.rightClose;
            },
            headBtn(i){
                this.headOn=i;
            },
            love:function(){

            }

        },
        created:function(){},
        mounted:function(){}
    })

</script>
</body>
</html>